import { Button, Tabs, List, Menu } from 'antd'
import React, { Component } from 'react'
import { getCookie } from '../../../Utils/Cookie_'
import style from './index.module.css'

const { TabPane } = Tabs

export default class CourseDescription extends Component {

  state = {
    courseId: 0,
    courseImg: '',
    courseName: '',
    courseBrief: '',
    courseMinPrice: 0,
    courseMaxPrice: 0,
    classHour: 0,
    courseList: [],
    coursewareList: [],
    // 课件资源右侧PDF图片
    PDFImg: '',
    // 课件资源右侧PDF
    coursewareDetails: [],
  }

  componentDidMount = () => {
    const courseId = getCookie('courseId')
    this.setState({
      courseId: 0,
      courseImg:
        'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
      courseName: '蜡笔小新',
      courseBrief:
        '该课程提供共16节编程入门内容，为学生提供深入简出的编程了解环境，很好做到了寓教于乐',
      courseMinPrice: 2000,
      courseMaxPrice: 2500,
      classHour: 20,
      // 课程大纲数据
      courseList: [
        {
          id: 101,
          href: 'http://www.baidu.com',
          courseImg:
            'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          courseTitle: '第一课：什么是编程',
          courseIntroduction: '课程简介：关于电脑编程的来源以及编程的发展历程关于电脑编程的来源以及编程的发展历程关于电脑编程的来源以及编程的发展历程关于电脑编程的来源以及编程的发展历程关于电脑编程的来源以及编程的发展历程关于电脑编程的来源以及编程的发展历程'
        },
        {
          id: 102,
          href: 'http://www.baidu.com',
          courseImg:
            'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          courseTitle: '第二课：什么是编程',
          courseIntroduction: '课程简介：关于电脑编程的来源以及编程的发展历程'
        },
        {
          id: 103,
          href: 'http://www.baidu.com',
          courseImg:
            'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          courseTitle: '第三课：什么是编程',
          courseIntroduction: '课程简介：关于电脑编程的来源以及编程的发展历程'
        },
        {
          id: 104,
          href: 'http://www.baidu.com',
          courseImg:
            'https://img1.baidu.com/it/u=1737887932,2007087118&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500',
          courseTitle: '第四课：什么是编程',
          courseIntroduction: '课程简介：关于电脑编程的来源以及编程的发展历程关于电脑编程的来源以及编程的发展历程关于电脑编程的来源以及编程的发展历程关于电脑编程的来源以及编程的发展历程'
        }
      ],
      // 课件资源数据
      coursewareList: [
        {
          title: '课程管理',
          key: 1,
        },
        {
          title: '视频管理',
          key: 2,
        },
        {
          title: '教案管理',
          key: 3,
        },
        {
          title: '素材管理',
          key: 4,
        },
        {
          title: '任务单管理',
          key: 5,
        },
      ],
      PDFImg: 'https://img95.699pic.com/xsj/0t/ok/t6.jpg!/fw/700/watermark/url/L3hzai93YXRlcl9kZXRhaWwyLnBuZw/align/southeast',
      // 课件资源下右侧PDF
      coursewareDetails: [
        {
          wareName: '入门入门入门入门入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
        {
          wareName: '入门.pdf',
          wareURL: 'http://www.baidu.com'
        },
      ]
    })

  }
  // 点击切换不同的资源
  handleClick = e => {
    // /course/resource/list/courseId=1?classifyId=e.key
    const result1=[{
      wareName: '切换了.pdf'+e.key,
      wareURL: 'http://www.baidu.com'
    },
    {
      wareName: '切换了.pdf'+e.key,
      wareURL: 'http://www.baidu.com'
    },
    {
      wareName: '切换了.pdf'+e.key,
      wareURL: 'http://www.baidu.com'
    }]
    console.log('click ', e);
    this.setState({
      coursewareDetails:result1
    })
  };
  render() {
    const {
      courseImg,
      courseName,
      courseBrief,
      classHour,
      courseList,
      PDFImg,
      coursewareList,
      coursewareDetails,
    } = this.state

    const expandIconPosition = 'end'
    return (
      <div className={style.course_info_box}>
        <div className={style.info_header}>
          <div className={style.header_name}>课程详情</div>
          <Button type="primary">编辑课程</Button>
        </div>
        <div className={style.course_info}>
          <img className={style.course_img} src={courseImg} alt={courseName} />
          <div className={style.course_description}>
            <div className={style.course_name}>{courseName}</div>
            <div className={style.course_brief}>
              <div className={style.course_tip}>简介：</div>
              {courseBrief}
            </div>
            <div className={style.course_brief}>
              <div className={style.course_tip}>总课时：</div>
              {classHour}
            </div>
          </div>
        </div>
        <div className={style.tools_box}>
          <Tabs size="large" defaultActiveKey="1" onChange={this.onChange}>
            <TabPane tab="课程大纲" key="1">
              <div>
                <List
                  itemLayout="vertical"
                  size="large"
                  dataSource={courseList}
                  renderItem={(item) => (
                    <List.Item
                      key={item.id}
                      className={style.course_item}
                      extra={
                        <a href={item.href}>
                          <img
                            width={90}
                            height={60}
                            alt="logo"
                            src={item.courseImg}
                          />
                        </a>
                      }
                    >
                      <a href={item.href}>
                        <List.Item.Meta
                          title={item.courseTitle}
                          description={item.courseIntroduction}
                        />
                      </a>
                    </List.Item>
                  )}
                /></div>
            </TabPane>
            <TabPane tab="课件资源" key="2">
              {
                <div>
                  {
                    <div className={style.courseWarePlace}>
                      <div>
                        <Menu
                          onClick={this.handleClick}
                          style={{ width: 140, height: 280,marginRight:'30px', color: '#123' }}
                          defaultSelectedKeys={['1']}
                          defaultOpenKeys={['sub1']}
                          mode="inline"
                          theme="light"
                        >
                          {
                            coursewareList.map((item) => {
                              return (
                                <Menu.Item key={item.key} style={{ height: 40 }}>
                                  <span style={{ color: '#123', lineHeight: '80px', textAlign: 'center' }}>
                                    {item.title}
                                  </span>
                                </Menu.Item>
                              )
                            })
                          }
                        </Menu>
                      </div>
                      <div className={style.courseWareDetail}>
                        {
                        coursewareDetails.map((item) => {
                          return (
                            <a href={item.wareURL}>
                              <img
                                width={50}
                                height={50}
                                alt="logo"
                                src={PDFImg}
                              />
                              <div className={style.PDFName}>{item.wareName}</div>
                            </a>
                          )
                        })
                        }
                        <div className={style.addWare}>
                          <p style={{fontSize: "37px",lineHeight:"40px",height: "1px"}}>+</p>
                          <p>添加</p>
                        </div>
                      </div>
                    </div>
                  }
                </div>
              }
            </TabPane>
          </Tabs>
          <Button className={style.edit_btn} type="primary">
            编辑课件
          </Button>
        </div>
      </div>
    )
  }
}

